{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}练习历史记录 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/practice_history.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->
    <div class="practice-history-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:profile_dashboard' %}">知识点画像</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">练习历史</li>
                    </ol>
                </nav>
                <h1 class="mb-2">
                    <i class="fas fa-history me-2"></i>练习历史记录
                </h1>
                <p class="mb-0 opacity-75">
                    查看您的所有练习记录，分析学习轨迹
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>返回仪表板
                    </a>
                    <button id="exportPracticeData" class="btn btn-light btn-sm">
                        <i class="fas fa-download me-1"></i>导出数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 统计概览 -->
    <div class="practice-stats-grid fade-in-up">
        <div class="practice-stat-card">
            <div class="practice-stat-value text-primary" id="total-practices">{{ practices.paginator.count }}</div>
            <div class="practice-stat-label">总练习记录</div>
        </div>
        
        <div class="practice-stat-card">
            <div class="practice-stat-value text-success" id="avg-score">计算中...</div>
            <div class="practice-stat-label">平均得分</div>
        </div>
        
        <div class="practice-stat-card">
            <div class="practice-stat-value text-info" id="accuracy">计算中...</div>
            <div class="practice-stat-label">正确率</div>
        </div>
        
        <div class="practice-stat-card">
            <div class="practice-stat-value text-warning" id="subjects-covered">计算中...</div>
            <div class="practice-stat-label">涉及科目</div>
        </div>
        
        <div class="practice-stat-card">
            <div class="practice-stat-value text-purple" id="knowledge-points">计算中...</div>
            <div class="practice-stat-label">知识点</div>
        </div>
    </div>

    <!-- 筛选卡片 -->
    <div class="filter-card fade-in-up">
        <form id="practiceFilterForm" method="get">
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">知识点</label>
                    <select name="knowledge_point" class="form-select form-select-sm">
                        <option value="">所有知识点</option>
                        {% for point in knowledge_points %}
                        <option value="{{ point.id }}" {% if current_filters.knowledge_point == point.id|stringformat:"i" %}selected{% endif %}>
                            {{ point.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">练习结果</label>
                    <select name="result" class="form-select form-select-sm">
                        <option value="">所有结果</option>
                        {% for value, name in result_choices %}
                        <option value="{{ value }}" {% if current_filters.result == value %}selected{% endif %}>
                            {{ name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">科目</label>
                    <select name="subject" class="form-select form-select-sm">
                        <option value="">所有科目</option>
                        {% for subject in subjects %}
                        <option value="{{ subject.id }}" {% if current_filters.subject == subject.id|stringformat:"i" %}selected{% endif %}>
                            {{ subject.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-filter me-1"></i>应用筛选
                        </button>
                        <button type="button" id="clearFilters" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-redo me-1"></i>清除
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- 当前筛选指示器 -->
        {% if current_filters.knowledge_point or current_filters.result or current_filters.subject %}
        <div class="current-filters">
            {% if current_filters.knowledge_point %}
            {% with point=knowledge_points|get_by_id:current_filters.knowledge_point %}
            <span class="filter-tag">
                知识点: {{ point.name }}
                <span class="close" onclick="removeFilter('knowledge_point')">×</span>
            </span>
            {% endwith %}
            {% endif %}
            
            {% if current_filters.result %}
            <span class="filter-tag">
                结果: {{ current_filters.result|get_result_display }}
                <span class="close" onclick="removeFilter('result')">×</span>
            </span>
            {% endif %}
            
            {% if current_filters.subject %}
            {% with subject=subjects|get_by_id:current_filters.subject %}
            <span class="filter-tag">
                科目: {{ subject.name }}
                <span class="close" onclick="removeFilter('subject')">×</span>
            </span>
            {% endwith %}
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- 练习记录表格 -->
    <div class="practice-table-container fade-in-up">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">
                <i class="fas fa-list me-2"></i>练习记录
                <small class="text-muted">(共 {{ practices.paginator.count }} 条记录)</small>
            </h5>
            
            <!-- 快速筛选 -->
            <div class="btn-group btn-group-sm">
                <button class="btn btn-outline-success quick-filter" data-filter-type="result" data-filter-value="correct">
                    <i class="fas fa-check me-1"></i>只看正确
                </button>
                <button class="btn btn-outline-danger quick-filter" data-filter-type="result" data-filter-value="incorrect">
                    <i class="fas fa-times me-1"></i>只看错误
                </button>
            </div>
        </div>

        {% if practices %}
        <div class="table-responsive">
            <table class="practice-table">
                <thead>
                    <tr>
                        <th data-sort="date" data-order="desc" style="cursor: pointer;">
                            练习时间 <i class="fas fa-sort ms-1"></i>
                        </th>
                        <th data-sort="knowledge_point" style="cursor: pointer;">
                            知识点 <i class="fas fa-sort ms-1"></i>
                        </th>
                        <th data-sort="result" style="cursor: pointer;">
                            结果 <i class="fas fa-sort ms-1"></i>
                        </th>
                        <th data-sort="score" style="cursor: pointer;">
                            得分 <i class="fas fa-sort ms-1"></i>
                        </th>
                        <th>科目</th>
                        <th>关联考试</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for practice in practices %}
                    <tr>
                        <td>{{ practice.practiced_at|date:"Y-m-d H:i" }}</td>
                        <td>
                            <a href="{% url 'analysis:knowledge_point_detail' practice.knowledge_point.id %}" class="knowledge-link">
                                {{ practice.knowledge_point.name }}
                            </a>
                        </td>
                        <td>
                            <span class="result-badge 
                                {% if practice.result == 'correct' %}bg-correct
                                {% elif practice.result == 'incorrect' %}bg-incorrect
                                {% else %}bg-partial{% endif %}">
                                {{ practice.get_result_display }}
                            </span>
                        </td>
                        <td>
                            {% if practice.score %}
                                <strong>{{ practice.score }}</strong>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="subject-tag">{{ practice.knowledge_point.subject.name }}</span>
                        </td>
                        <td>
                            {% if practice.exam_record %}
                                <a href="{% url 'score:score_detail' practice.exam_record.id %}" class="text-decoration-none">
                                    {{ practice.exam_record.exam.name }}
                                </a>
                            {% else %}
                                <span class="text-muted">独立练习</span>
                            {% endif %}
                        </td>
                        <td>
                            {{ practice.notes|default:"-"|truncatechars:30 }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">
                <i class="fas fa-inbox"></i>
            </div>
            <h3 class="empty-title">暂无练习记录</h3>
            <p class="empty-description">
                {% if current_filters.knowledge_point or current_filters.result or current_filters.subject %}
                当前筛选条件下没有找到练习记录，请尝试调整筛选条件。
                {% else %}
                您还没有练习记录，开始学习后这里会显示您的练习历史。
                {% endif %}
            </p>
            <div class="d-flex gap-2 justify-content-center">
                {% if current_filters.knowledge_point or current_filters.result or current_filters.subject %}
                <button id="clearFilters" class="btn btn-primary">
                    <i class="fas fa-redo me-1"></i>清除筛选
                </button>
                {% endif %}
                <a href="{% url 'score:score_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-book me-1"></i>开始学习
                </a>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 分页 -->
    {% if practices.paginator.num_pages > 1 %}
    <div class="pagination-container fade-in-up">
        <nav>
            <ul class="pagination">
                {% if practices.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ practices.previous_page_number }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">上一页</a>
                    </li>
                {% endif %}

                {% for num in practices.paginator.page_range %}
                    {% if practices.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > practices.number|add:'-3' and num < practices.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if practices.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ practices.next_page_number }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ practices.paginator.num_pages }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">末页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<script>
// 移除筛选功能
function removeFilter(filterName) {
    const url = new URL(window.location.href);
    url.searchParams.delete(filterName);
    window.location.href = url.toString();
}
</script>
{% endblock %}

{% block extra_js %}
<script src="{% static 'analysis/js/practice_history.js' %}"></script>
{% endblock %}
